<template>
	<div class="hello">
		<button @click="ifIsShow=!ifIsShow" class="btn btn-success">if 显示/隐藏{{ifIsShow}}</button>
		<div class="box" v-if="ifIsShow">
			我是切换div if

		</div>
		<br />
		<button @click="showIsShow=!showIsShow" class="btn btn-success">show 显示/隐藏{{showIsShow}}</button>
		<div class="box" v-show="showIsShow">
			我是切换div show

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				ifIsShow: true,
				showIsShow: true,
			}
		}

	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.box{
			width: 300px;
			height: 300px;
			background: red;
			margin: 0 auto;
		}
</style>